const path = require('path');
// dist目录下自动生成index.html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 打包之前清除dist文件夹
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // 入口
  entry: './src/index.ts',
  // 出口
  output: {
    // 虚拟打包路径，就是说文件夹不会真正生成，而是在 8080 端口虚拟生成，不会真正的物理生成
    // publicPath: 'dist',
    path: path.resolve(__dirname, 'dist'),
    // 打包出来的文件名
    filename: 'bundle.js'
  },
  // webpack打包不使用箭头函数
  // environment: {
  //   arrowFunction: false
  // },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins:[
                [
                  'postcss-preset-env',
                  {
                    browsers: 'last 2 versions'
                  }
                ]
              ]
            }
          }
        }, 
        'less-loader']
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      },
      {
        test: /\.(jpg|png|gif)$/,
        // 使用url-loader必须要引入file-loader
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8 * 1024
            }
          }
        ]
      },
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'babel-loader',
            // 设置预定义环境
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  // 配置信息
                  {
                    // 选择要兼容的目标浏览器
                    targets: {
                      ie: '11'
                    },
                    // 指定corejs版本
                    corejs: '3',
                    // 使用corejs的方式, usage表示按需加载
                    useBuiltIns: 'usage'
                  }
                ]
              ]
            }
          },
          'ts-loader'
        ],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  // 用来设置引用模块
  resolve: {
    extensions: ['.ts', '.js']
  },
  devServer: {
    // 端口号
    port: 8080,
    // 静态资源文件夹
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    open: true
  },
  mode: 'development'
};
